<template>
	<view class="turntable relative">
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="" :autoBack="true" placeholder bgColor="transparent">
		</up-navbar>
		<image mode="aspectFill" class="turntable-bg fixed"
			src="https://ryyf.wangjintech.cn/static/image/point/turntable.png" />
		<view class="turntable-gift fixed zi2">
			<image class="turntable-gift-bg" src="https://ryyf.wangjintech.cn/static/image/point/giftBg2.png"></image>
			<image class="absolute turntablBtn" @click="lottery"
				src="https://ryyf.wangjintech.cn/static/image/point/turntablBtn.png" />
			<view class="turntable-gift-listBg absolute">
				<view class="inheritance" :animation='giftAnimation'>
					<image class="absolute giftY" src="https://ryyf.wangjintech.cn/static/image/point/giftY.png">
					</image>
					<view class="turntable-gift-list absolute">
						<view :class="`absolute turntable-gift-list-item turntable-gift-list-${index}`"
							v-for="(item,index) in giftList" :key="item.id">{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zi2 fixed turntable-tips border-box">
			注明:<br />
			所有奖励均为游戏道具，领取方式以下2种；<br />
			1.购物车直接领取（兑换可能有延迟）<br />
			2.加QQ交流群457572422私聊管理员领取（管理员收到消息立即兑换）<br />
			商务广告/主播合作请加VX:Yao66866520
		</view>
	</view>
</template>

<script setup>
	import {
		msg
	} from "@/utils/tool";
	import secondApi from "@/api/biz/second.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'

	const giftSelect = ref(1) // 指定奖励下标
	const giftSize = 1000 * 3; // 旋转时间
	const giftFrequency = 3 // 圈数
	const giftDistance = 45 // 礼物距离

	const giftList = ref([])

	const getGiftList = () => {
		secondApi.getGiftList().then(res => {
			giftList.value = res.data;
		})
	}

	const ongoing = ref(false);
	const ongointN = ref(0)

	const lottery = () => {

		if (ongoing.value) return;
		ongoing.value = true;

		secondApi.createLotteryRecord().then(res => {
			if (res.code === 0) {
				giftSelect.value = giftList.value.findIndex(item => item.id === res.data);
				startTheDraw(giftList.value[giftSelect.value].title)
			}
		})
	}

	const giftAnimation = ref();
	const giftAnimationCopy = ref();


	const startTheDraw = (title) => {

		// let Animation = 

		let omit = 360;
		let selectDistance = (giftSelect.value * -1) * giftDistance
		let totalDistance = omit * giftFrequency
		let rotateDistance = selectDistance + totalDistance;

		// 多次
		let repeatedly = 0;
		if (ongointN.value > 0) {
			repeatedly += (totalDistance * ongointN.value)
		}

		giftAnimationCopy.value.rotate(rotateDistance + repeatedly).step()
		giftAnimation.value = JSON.parse(JSON.stringify(giftAnimationCopy.value.export()));

		setTimeout(() => {
			uni.showModal({
				title: "提示",
				content: `恭喜抽中 “${title}” `,
				showCancel: false,
			})

			ongointN.value++

			ongoing.value = false;
		}, giftSize)
	}

	onLoad(() => {
		getGiftList()

		giftAnimationCopy.value = uni.createAnimation({
			duration: giftSize,
			timingFunction: "ease",
		})

	})
</script>

<style scoped lang="scss">
	.turntable-bg {
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}

	.turntable {
		width: 100vw;
		height: 100vh;


		.turntablBtn {
			width: 208rpx;
			height: 218rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 12;

			image {
				width: 208rpx;
				height: 218rpx;
			}
		}

		&-gift {
			top: 27vh;
			left: 50%;
			transform: translateX(-50%);


			&-listBg {
				$wh: 505rpx;
				z-index: 11;
				width: $wh;
				height: $wh;
				top: calc(50% - 4rpx);
				left: calc(50% - -2rpx);
				transform: translate(-50%, -50%);

				.inheritance {
					width: $wh;
					height: $wh;
				}



				.turntable-gift-list {
					width: $wh;
					height: $wh;
					top: 0;
					left: 0;


					&-item {
						width: 124rpx;
						height: 124rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #366EFE;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3; //多行在这里修改数字即可
						overflow: hidden;
						/* autoprefixer: ignore next */
						-webkit-box-orient: vertical;
						text-align: center;
					}

					&-0 {
						top: 18rpx;
						left: 50%;
						transform: translateX(-50%);
					}

					&-1 {
						top: 72rpx;
						right: 61rpx;
						transform: rotate(45deg);
					}

					&-2 {
						top: 202rpx;
						right: 16rpx;
						transform: rotate(90deg);
					}

					&-3 {
						bottom: 64rpx;
						right: 66rpx;
						transform: rotate(135deg);
					}

					&-4 {
						bottom: 18rpx;
						left: 50%;
						transform: translateX(-50%) rotate(180deg);
					}

					&-5 {
						bottom: 70rpx;
						left: 64rpx;
						transform: rotate(225deg);
					}

					&-6 {
						top: 185rpx;
						left: 16rpx;
						transform: rotate(-90deg);
					}

					&-7 {
						top: 65rpx;
						left: 74rpx;
						transform: rotate(-45deg);
					}
				}

				.giftY {
					width: $wh;
					height: $wh;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			&-bg {
				$wh: 750rpx;
				width: $wh;
				height: $wh;
			}
		}

		&-tips {
			left: 50%;
			transform: translateX(-50%);
			padding: 18rpx 20rpx;
			bottom: 32rpx;
			width: 690rpx;
			background: #2E74C0;
			opacity: 0.9;
			font-weight: 400;
			font-size: 26rpx;
			color: #EDFAFF;
			line-height: 52rpx;
		}
	}
</style>